import { Base64 } from "js-base64";
import { Button, Input } from "antd";
import { ForwardOutlined, BackwardOutlined } from "@ant-design/icons";
import { useState } from "react";

export default () => {
    const [text, setText] = useState("输入要编码的文本");
    const [cipherText, setCipherText] = useState("");

    return (
        <div style={{ display: "flex" }}>
            <div style={{ flex: 1 }}>
                明文：
                <Input.TextArea value={text} style={{ width: "100%", height: 400 }} onChange={(e) => setText(e.target.value)} />
            </div>
            <div style={{ width: 160, margin: "40px 20px" }}>
                <Button type="primary" block icon={<ForwardOutlined />} onClick={() => text && setCipherText(Base64.encode(text))}>
                    BASE64编码
                </Button>
                <Button type="primary" block icon={<BackwardOutlined />} style={{ marginTop: 20 }} onClick={() => cipherText && setText(Base64.decode(cipherText))}>
                    BASE64解码
                </Button>
            </div>
            <div style={{ flex: 1 }}>
                BASE64：
                <Input.TextArea value={cipherText} style={{ width: "100%", height: 400 }} onChange={(e) => setCipherText(e.target.value)} />
            </div>
        </div>
    );
};
